<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内部样式表（主页）</title>
	<style>
/*css初始化*/
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;/*去掉列表样式小点*/
		}

		.clearfix:before,.clearfix:after{/*三个清除浮动*/
			display: table;
			content: "";
		}
		.clearfix:after{
			clear: both;
		}
		.clearfix{
			*zoom:1;
		}
		body{
			background-color: #ffffff;
		}
		a{
			text-decoration: none;/*取消下划线*/
			font-size: 20px
		}
/*		背景区*/
		header{
			height: 730px;
			background-color: pink;
			overflow: hidden;
			background:#DBD3D3 url(images/首页背景6.jpg) center no-repeat;
			background-size: cover;
		}
		.inheadbox{
			height: 42px;
			width: 1200px;
			background-color:rgba(255,255,255,0);
			margin: 26px auto 0;
		}
		.inheadbox a{
			font-family: "kaiti" ;
		}
		.inheadboxbar{
			float: right;/*设置导航栏右浮动*/
			height: 42px;
			line-height:42px;/*设置行高等于高，使导航栏里文字居中，行高给父，让li继承此父类，因为给父写了就不用给每个li写了*/
		}
		.inheadboxbar li{
			float: left;/*让1，2，3一行显示*/
		}
		.inheadboxbar li a{
			padding: 0 35px;/*上下0，左右25*/
			color:#CBC6C6;
			font-family: "kaiti" ;
		}
		.inheadboxbar li a:hover{
			color: white;
		}
		.me{
			float: left;
			color:#CBC6C6;
			font-size: 20px;
			padding: 4px;
		}
		.me:hover{
			color: white;
		}
		
/*		背景区里文字区*/
		.collection{
			height: 100px;
			width: 380px;
			background-color:rgba(255,255,255,0);
			margin: 200px 540px 0px 540px;
			font-size: 80px;
			color: #f0f0f0;
		}
		
		.fondme{
			height: 30px;
			width: 50px;
			background-color: rgba(255,255,255,0);
			float: left;
			margin: 0px 709px ;
			color:  #f0f0f0;
			font-size: 25px
		}
		.fondme a{
			color: #CBC6C6;
		}
		.fondme a:hover{
			color: white;
		}
/*		描述区*/
		nav{
			height: 70px;
			width: 1300px;
			margin: 120px auto 40px;/*盒子水平居中对齐 */
		}
		p{
			font-size: 20px;
		}
/*		收藏区*/
		.box2{
			height: 700px;
			background-color: #ffffff;
			overflow: hidden;/*防止外边距合并的问题*/
		}
		.picture{
			width: 420px;
			height:500px;
			background-color: #ffffff;
			float: left;
			margin: 15px;
		}
		.poem{
			width: 420px;
			height:500px;
			background-color: #ffffff;
			float: left;
			margin: 15px;
		}
		.note{
			width: 420px;
			height: 500px;
			background-color: #ffffff;
			float: left;
			margin: 15px 15px 15px 100px;
		}
		.black{
			color: black;
			line-height: 45px;
		}
		.gray{
			color:#847987;
			font-size: 15px;
		}
	</style>
</head>

<body>
<!--	背景区-->
	<header>
		<div class="inheadbox">
			<a href="#" class="me">首页</a>
		<div class="inheadboxbar">
			<ul>
				<li><a href="登录.html">登录</a></li>
				<li><a href="l联系.html">联系</a></li>
				<li><a href="介绍.html">介绍</a></li>
			</ul>
		</div>
		</div>
		<!--	背景区里文字区-->
	<div class="collection">Collection</div>
	<div class="fondme"><a href="个人中心.html">calin</a></div>
	</header>
<!--	描述区-->
	<nav><p>时间的漏斗记录点点滴滴的美丽,记忆的双手常常拾起温暖的景</p><p>美好,尽在个人收藏网站!</p></nav>
<!--	收藏区-->
	<div class="box2">
		<div class="note"><a href="笔记.html"><img src="images/note收藏.PNG"><p class="black">笔记</p><p class="gray">畅所欲言,随心所记</p></a></div>
		<div class="picture"><a href="图片收藏.html"><img src="images/图片收藏.PNG" ><p class="black">图片收藏</p><p class="gray">喜欢的各种图片,素材图</p></a></div>
		<div class="poem"><a href="诗集收藏.html"><img src="images/poem收藏.jpg"><p class="black">诗集</p><p class="gray">诗和远方</p></a></div>
	</div>
<!--	收藏区-->
</body>
</html>
